<template>
    <div class="blog-box">
        <div class="blog-header clear-fix">
            <div class="logo float-left">
                阳光沙滩
            </div>
            <div class="login-tips-text float-right" v-if="userInfo.id === ''">

                <NuxtLink :to="'/login?redirect=' + redirectPath">
                    <span class="el-icon-user">登录</span>
                </NuxtLink>
                |
                <NuxtLink to="/register">
                    <span class="el-icon-circle-plus">注册</span>
                </NuxtLink>
            </div>

            <div class="user-info-box float-right" v-else>
                <div class="header-user-avatar float-left">
                    <nuxt-link :to="'/userInfo/' + userInfo.id">
                        <el-avatar :src="userInfo.avatar"></el-avatar>
                    </nuxt-link>
                </div>
                <div class="header-user-username float-left">
                    <el-dropdown @command="handleCommend">
                      <span class="el-dropdown-link">
                        {{ userInfo.userName }}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
                            <el-dropdown-item command="manage" v-show="userInfo.roles === 'role_admin'">管理中心
                            </el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>

            <div class="navigation-box float-right">
                <NuxtLink to="/">
                    <span
                        :class="$store.state.currentActive === '/' ?'el-icon-s-home navigation-box-text-active': 'el-icon-s-home'">
                        首页</span>
                </NuxtLink>
                <NuxtLink to="/about">
                    <span
                        :class="$store.state.currentActive === '/about' ?'el-icon-info navigation-box-text-active': 'el-icon-info'">
                    关于</span>
                </NuxtLink>
                <NuxtLink to="/link">
                    <span
                        :class="$store.state.currentActive === '/link' ?'el-icon-link navigation-box-text-active': 'el-icon-link'">
                        友情链接</span>
                </NuxtLink>
            </div>
        </div>

        <Nuxt/>

        <el-backtop ref="elBackTop"></el-backtop>

        <div class="blog-footer">
            <div class="copy-right-box">
                <p>Copyright © 阳光沙滩(2014-2020） 本网站由程序猿(媛)用爱驱动</p>
            </div>
            <div>
                <a href="/link">
                    <span>友情链接</span> |
                </a>
                <a href="/about">
                    <span>关于我们</span> |
                </a>
                <a href="/about/?active=3">
                    <span>联系我们</span>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
import {doLogout, getOwnInfo} from "assets/api/userApi";
import {success_code} from "assets/utils/LRConstant";

export default {
    data() {
        return {
            userInfo: {
                id: "",
                userName: "",
                password: "",
                roles: "",
                avatar: "",
                email: "",
                sign: "",
                state: "",
                regIp: "",
                loginIp: "",
            },
            redirectPath: ""
        }
    },
    methods: {
        getOwnInfo() {
            getOwnInfo().then((result) => {
                if (result.code === success_code) {
                    this.userInfo = result.data
                    this.$store.commit("setUserId", this.userInfo.id);
                } else {
                    this.$message.warning("未登录");
                }
            });
        },
        handleCommend(val) {
            switch (val) {
                case 'manage':
                    location.href = 'http://39.108.110.26'
                    break
                case 'logout':
                    doLogout().then((result) => {
                        if (result.code === success_code) {
                            location.href = '/login';
                            this.userInfo = {}
                        } else {
                            this.$message.error("退出登录失败，原因:" + result.message);
                        }
                    })
                    break
                case 'userInfo':
                    location.href = '/userInfo/' + this.userInfo.id;
                    break
            }
        }
    },
    mounted() {
        // check data
        if (this.redirectPath !== location.href &&
            this.$route.path !== '/' &&
            this.$route.path !== '/login' &&
            this.$route.path !== '/register' &&
            this.$route.path !== '/forget'
        ) {
            this.redirectPath = location.href;
        }
        this.getOwnInfo();
    }
}
</script>

<style>
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
}

a:-webkit-any-link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}


.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix {
    overflow: hidden;
    zoom: 1;
}

.blog-box {
    width: 1140px;
    margin: 0 auto;
}

body {
    background-color: #f2f2fa;
}

.blog-header {
    margin-top: 20px;
    background-color: white;
    padding: 10px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
}

.blog-footer span:hover {
    color: purple;
}

.blog-footer {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 10px;
    margin-top: 20px;
}

.copy-right-box {
    margin-bottom: 10px;
}

.logo {
    color: #737f90;
    font-size: 24px;
    font-weight: 600;
}

.navigation-box span:hover {
    color: skyblue;
}


.navigation-box-text-active {
    color: skyblue;
}

.navigation-box {
    color: #737f90;
    margin-right: 50px;
    font-size: 18px;
    cursor: pointer;
}

.login-tips-text span {
    cursor: pointer;
}

.login-tips-text span:hover {
    color: deepskyblue;
}


.header-user-username {
    font-size: 14px;
    font-weight: 600;
    color: white;
    margin-left: 10px;
}

.el-dropdown-link {
    cursor: pointer;
}
</style>
